<template>
  <div class="header">
    <span class="switchState">
      <i class="iconfont icon-qiehuan" @click="switchState">
        <!-- <span style="font-size:18px">收起</span> -->
      </i>
    </span>
    <el-dropdown
      @command="handleCommand"
      :hide-on-click="false"
      trigger="click"
      placement="top"
    >
      <span class="el-dropdown-link">
        {{ roleType }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="signOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import "../sidebar/font/iconfont.css";
export default {
  data() {
    return {
      test: "",
    };
  },
  mounted() {
    
  },
  methods: {
    handleCommand(command) {
      if (command == "signOut") {
        // alert("退出登录")
        this.$router.push({ path: "/login" });
      }
    },
    // 切换侧边栏的状态
    switchState() {
      let isCollapse = this.$store.state.sidebar.isCollapse;
      this.$store.dispatch("sidebar/sidebar_iscollapse", !isCollapse);
    },
  },
  computed: {
    roleType() {
      let userInfo = sessionStorage.getItem("userInfo");
      return userInfo ? JSON.parse(userInfo).roleType : "";
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  color: #999999;
  background-color: #fff;
  height: 60px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
  .switchState {
    .icon-qiehuan {
      font-size: 25px;
      color: #666666;
    }
  }
}
</style>